import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import 'animate.css/animate.min.css'
import ListBg from '@site/src/components/home/ListBg'
import Translate from '@docusaurus/Translate'
import Link from '@docusaurus/Link'

interface Item {
  id: number
  text: JSX.Element
  title: JSX.Element
}

const items: Item[] = [
  {
    id: 1,
    title: (
      <Translate
        id="component.home.HomepageCard.features.1.title"
        description="the title of first feature of mobile edition">
        Qemu-riscv64
      </Translate>
    ),
    text: (
      <Translate
        id="component.home.HomepageCard.features.1.text"
        description="First feature of Mobile edition">
        Currently, PolyOS Mobile operates on the qemu-riscv64
        virtualization platform as its hardware foundation.
      </Translate>
    ),
  },
  {
    id: 2,
    title: (
      <Translate
        id="component.home.HomepageCard.features.2.title"
        description="the title of second feature of mobile edition">
        OpenHarmony
      </Translate>
    ),
    text: (
      <Translate
        id="component.home.HomepageCard.features.2.text"
        description="The second feature of Mobile Edition">
        PolyOS Mobile extends an OpenHarmony reference porting
        implementation to RISC-V hardware manufacturers and
        developers.
      </Translate>
    ),
  },
  {
    id: 3,
    title: (
      <Translate
        id="component.home.HomepageCard.features.3.title"
        description="the title of third feature of mobile edition">
        Portability
      </Translate>
    ),
    text: (
      <Translate
        id="component.home.HomepageCard.features.3.text"
        description="The third feature of Mobile edition">
        PolyOS Mobile serves to alleviate the complexity of porting
        OpenHarmony applications to RISC-V hardware platforms.
      </Translate>
    ),
  },
  {
    id: 4,
    title: (
      <Translate
        id="component.home.HomepageCard.features.4.title"
        description="the title of fourth feature of mobile edition">
        Platform
      </Translate>
    ),
    text: (
      <Translate
        id="component.home.HomepageCard.features.4.text"
        description="The fourth feature of Mobile Edition">
        PolyOS Mobile offers a virtual experimental platform for
        adapting to novel RISC-V hardware features and integrating
        emerging software ecosystems.
      </Translate>
    ),
  },
  {
    id: 5,
    title: (
      <Translate
        id="component.home.HomepageCard.features.5.title"
        description="the title of first feature of AIoT edition">
        Customizability
      </Translate>
    ),
    text: (
      <Translate
        id="component.home.HomepageCard.features.5.text"
        description="First feature of AIoT edition">
        PolyOS AIoT embodies a trait of heightened customizability,
        coupled with its exceptional compatibility with RISC-V
        hardware.
      </Translate>
    ),
  },
  {
    id: 6,
    title: (
      <Translate
        id="component.home.HomepageCard.features.6.title"
        description="the title of second feature of AIoT edition">
        Diversity
      </Translate>
    ),
    text: (
      <Translate
        id="component.home.HomepageCard.features.6.text"
        description="The second feature of AIoT Edition">
        PolyOS AIoT boasts support for a diverse array of RISC-V
        hardware, embedded intelligent inference frameworks, as well
        as the construction and deployment of multi-core image
        configurations.
      </Translate>
    ),
  },
  {
    id: 7,
    title: (
      <Translate
        id="component.home.HomepageCard.features.7.title"
        description="the title of third feature of AIoT edition">
        Performance
      </Translate>
    ),
    text: (
      <Translate
        id="component.home.HomepageCard.features.7.text"
        description="The third feature of AIoT edition">
        PolyOS AIoT attains performance that stands at the forefront
        of its counterparts.
      </Translate>
    ),
  },
]

export default function HomepageCard(): React.JSX.Element {
  return (
    <div className={clsx(styles.heroBanner)}>
      <div className="container">
        <div className={clsx('row', styles.title_row)}>
          <div className={styles.square}></div>
          <h1 className={styles.title}>
            <Translate
              id="component.home.HomepageCard.mobile.title"
              description="about PolyOS Mobile">
              PolyOS Mobile
            </Translate>
          </h1>
          <div className={styles.square}></div>
        </div>
        <div className={clsx('row', styles.title_button)}>
          <Link
            className={clsx(
              'button button--outline button--primary button--lg',
              styles.button
            )}
            to="/polyos-mobile">
            <Translate
              id="component.home.HomepageCard.button.learnMore.text"
              description="homepage PolyOS Mobile get-started button">
              Learn more
            </Translate>
          </Link>
        </div>

        <div className="row">
          {items.map((item: Item, idx) => {
            if (item.id <= 4) {
              return (
                <div key={idx} className={clsx('col col--6')}>
                  <ListBg
                    key={item.id}
                    title={item.title}
                    text={item.text}
                  />
                </div>
              )
            }
            return <></>
          })}
        </div>
        <div className={clsx('row', styles.title_row)}>
          <div className={styles.square}></div>
          <h1 className={styles.title}>
            <Translate
              id="component.home.HomepageCard.AIoT.title"
              description="about PolyOS AIoT">
              PolyOS AIoT
            </Translate>
          </h1>
          <div className={styles.square}></div>
        </div>
        <div className={clsx('row', styles.title_button)}>
          <Link
            className="button button--primary button--outline button--lg"
            to="https://isrc.iscas.ac.cn/riscv-raios/docs/">
            <Translate
              id="component.home.HomepageCard.button.learnMore.text"
              description="homepage PolyOS AIoT get-started button">
              Learn more
            </Translate>
          </Link>
        </div>

        <div className="row">
          {items.map((item: Item, idx) => {
            if (item.id > 4) {
              return (
                <div key={idx} className={clsx('col col--4')}>
                  <ListBg
                    key={item.id}
                    title={item.title}
                    text={item.text}
                  />
                </div>
              )
            }
            return <></>
          })}
        </div>
      </div>
    </div>
  )
}
